<template>
  <div class="invoice">
    <el-select v-model="params.status" @change='changeData()' placeholder="请选择审核类型">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.text"
          :value="item.value"
        ></el-option>
      </el-select>
    <el-table class='table' :data="authenticationTableData" border style="width: 100%">
      <el-table-column label="用户">
         <template slot-scope="scope">
            <div class='imgAvatar'>
                <img :src="getAvatar(scope.row)" alt="">
            </div>
            <p>{{getName(scope.row)}}</p>
        </template>
      </el-table-column>
      <el-table-column label="快递信息">
         <template slot-scope="scope">
            <p>{{scope.row.expressName}}</p>
            <p>{{scope.row.expressNumber}}</p>
        </template>
      </el-table-column>
      <el-table-column label="发票图片">
        <template slot-scope="scope">
          <div class='imgGroup'>
            <div class="imgBox" v-for="(item,index) in JSON.parse(scope.row.certs)" :key='index'>
              <img preview="1" :src="item" alt>
            </div>
          </div>
          
        </template>
      </el-table-column>
      <el-table-column label="转账金额">
        <template slot-scope="scope">
          <span @click='invoiceAmountChecking(scope.row)' class="link-type">{{getMoney(scope.row)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="时间">
        <template slot-scope="scope">
            <!-- {{ scope.row.time | parseTime('{y}-{m}-{d} {h}:{i}') }} -->
            <span>{{scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
        </template>
      </el-table-column>
      <el-table-column width="200px" label="操作">
        <template slot-scope="scope">
          <span v-if="scope.row.status.value === 'success'">成功</span>
          <el-button v-if="scope.row.status.value === 'checking'" @click='userCheck(scope.row,true)' type="text" size="mini">通过</el-button>
          <el-button v-if="scope.row.status.value === 'checking'" @click='userCheck(scope.row,false)' type="text" size="mini">拒绝</el-button>
          <span v-if="scope.row.status.value === 'failed'">失败原因:{{scope.row.failedReason}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div v-if='sureStatus'>
        <p>确认通过审核吗？</p>
      </div>
      <div v-if='closeStatus'>
        <p>请输入拒绝原因</p>
        <el-input class="edit" v-model="checkParams.failedReason" placeholder="请输入内容"></el-input>
      </div>
      
      <div class="btnGroup">
        <el-button @click='dialogVisible = false'>取消</el-button>
        <el-button @click="sureForword" type="primary">确认</el-button>
      </div>
    </el-dialog>
    <!-- 查看发票金额 -->
    <el-dialog :visible.sync="dialogCheckingVisible" width="30%" :before-close="handleCheckingClose">
      <div class='amountChecking'>
        <div v-for="(item,index) in dataDialog" :key='index' class='item'>
          <p>日期：{{item.createTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</p>
          <p>转账金额：{{getCheckingMoney(item)}}元</p>
          <p>发票保证金：<span>{{item.fee}}元</span></p>
        </div>
      </div>
    </el-dialog>


    <el-pagination
      class="pagination"
      background
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="total"
    ></el-pagination>
  </div>
</template>


<script>
import Vue from 'vue';
import { ajax } from "@/api";
import numberFormat from "@/api/numberFormat";
import { getToken } from "@/utils/auth";
import preview from 'vue-photo-preview';
import 'vue-photo-preview/dist/skin.css';
import {cityUtil} from '@/utils/cityData.js';
Vue.use(preview);

export default {
  name: "index",
  data() {
    return {
      total: 0,
      value: "",
      sureStatus:false,
      closeStatus:false,
      dialogVisible:false,
      dialogCheckingVisible:false,
      authenticationTableData: [],
      options:[{
        text:'全部',
        value:''
      },{
        text:'认证审核中',
        value:'checking'
      },{
        text:'认证失败',
        value:'failed'
      },{
        text:'认证成功',
        value:'success'
      }],
      params:{  //用户奖励金发票凭证列表
        status:'',
        start:0,
        limit:10,
        token:getToken()
      },
      tableData:[],
      checkParams:{ //用户奖励金发票凭证审核
        invoiceId:'',
        success:'',
        failedReason:'',
        token:getToken()
      },
      users:{},
      dataDialog:[]
    };
  },
  methods: {
    getCheckingMoney(data){
      return data.totalMoney + data.fee;
    },
    invoiceAmountChecking(data){
      this.dialogCheckingVisible = true;
      this.dataDialog = JSON.parse(data.flows);
    },
    getShow(item){
      return scope.row.certs.indexof('http') > -1;
    },
    getMoney(item){
      let data = JSON.parse(item.flows),number = 0;
      for(let i = 0;i < data.length;i++){
          number += Number(data[i].totalMoney) + Number(data[i].fee);
      }
      return number+'元';
    },
    changeData(){
      this.getData();
    },
    //用户奖励金发票凭证审核
    userCheck(data,boolean){
      this.checkParams.invoiceId = data.id;
      this.dialogVisible = true;
      if(boolean){
          this.checkParams.success = true;
          this.sureStatus = true;
          this.closeStatus = false;
      }else{  
          this.checkParams.success = false;
          this.sureStatus = false;
          this.closeStatus = true;
      }
    },
    sureForword(){
      if(this.boolean && this.checkParams.failedReason === ''){
        return this.$message.error('拒绝原因不能为空');
      }
      this.getAjax();
    },
    handleClose(done){
      done();
      this.dataDialog = [];
    },
    getAjax(){
      ajax('userRewardInvoiceCheck',this.checkParams).then((res) => {
          if(res.data.status){
            this.$message.success('保存成功');
            this.checkParams = {
              invoiceId:'',
              success:'',
              failedReason:'',
              token:getToken()
            };
            this.dialogVisible = false;
            this.getData();
          }
      }); 
    },
    getData(){   //用户奖励金发票凭证列表
      ajax('userRewardInvoices',this.params).then((res) => {
          if(res.data.status){
            this.authenticationTableData = res.data.data;
            this.total = res.data.total;
            this.users = res.data.users;
            this.$previewRefresh()
          }
      });
    },

    getAvatar(item){
      // console.log(this.users);
      return this.users[item.userId].avatar;
    },
    getName(item){
      return this.users[item.userId].name;
    },

    handleCheckingClose(done){
      done();
    },


    //得到地区
    getAddressData(areaId){
      return cityUtil.getAreaById(areaId);
    },
    handleCurrentChange(val){
      this.params.start = (val - 1) * this.params.limit;
      this.getData();
    }
  },
  mounted(){
    this.getData();
  }
};
</script>


<style lang="less" scoped>
.invoice {
  padding: 1rem;
  .imgGroup{
    display: flex;
  }
  .imgBox {
    width: 200px;
    height: 100px;
    margin: 1rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .imgAvatar {
    width: 50px;
    height: 50px;
    margin: 1rem 0;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50px;
    }
  }
  .select {
    margin: 1rem 0;
  }

  .amountChecking{
    .item{
      padding: .5rem;
      margin-bottom: .5rem;
      line-height: 2rem;
      border-bottom: 1px solid #aaa;
      p{
        margin: 0;
        font-size: 16px;
        color: rgba(16, 16, 16, 1);
        span{
          color:#ff286d;
        }
      }
    }
  }

  .pagination {
    margin: 1rem 0;
    text-align: right;
  }
  .btnGroup {
    text-align: right;
    margin-top: 2rem;
  }
  .table{
    margin-top: 1rem;
  }
}
</style>
